<template>
  <div class="chart14">
    <div id="chart14">

    </div>
  </div>
</template>

<script>
import echarts from 'echarts'


var option = {
  title: {
    text: '',
    subtext: '',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    show: false
  },
  toolbox: {
    show: false,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: {
        show: true,
        type: ['pie', 'funnel']
      },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  grid: {
    top: '15%',
    left: '3%',
    right: '4%',
    bottom: '8%',
    containLabel: true,
  },
  series: [
    {
      name: '面积模式',
      type: 'pie',
      radius: [30, 80],
      center: ['50%', '50%'],
      roseType: 'area',
      data: [
        // { value: 10, name: 'rose1' },
        // { value: 5, name: 'rose2' },
        // { value: 15, name: 'rose3' },
        // { value: 25, name: 'rose4' },
        // { value: 20, name: 'rose5' },
        // { value: 35, name: 'rose6' },
        // { value: 30, name: 'rose7' },
        // { value: 40, name: 'rose8' }
      ]
    }
  ]
};
export default {
  props: {
    chatData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      box: null,
      option: option
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if (!this.box) {
        this.box = echarts.init(document.getElementById('chart14'));
      }
      this.initOption()
      this.box.setOption(this.option);
    },
    initOption() {
      if (this.chatData.length > 0) {
        // let keys = Object.keys(this.chatData)

        let data1 = []
        this.chatData.forEach(
          item => {
            data1.push({
              value: item.orderCount,
              name: item.cityName
            })
          }
        )


        this.option.series[0].data = data1
        // this.option.series[0].data = data1
        // this.option.series[1].data = data2
        // this.chatData
      }
    },
    resize() {
      this.box.resize()
    }
  },
  watch: {
    chatData: {
      deep: true,
      handler(val) {
        this.init()
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chart14 {
  width: 100%;
  height: 100%;
}
#chart14 {
  width: 100%;
  height: 100%;
}
</style>
